<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		:close-on-click-modal="true"
		mode="form"
		@open="onOpen"
		@closed="onClose"
	>
		<!-- 页面主体内容开始 -->
		<vk-data-form
			ref="form1"
			v-model="form1.data"
			:form-type="value.mode"
			:rules="form1.props.rules"
			:action="form1.props.action"
			:columns="form1.props.columns"
			:loading.sync="form1.props.loading"
			:labelWidth="form1.props.labelWidth"
			:show-cancel="page.showCancel"
			:cancel-text="page.cancelText"
			:submit-text="page.submitText"
			:before-action="form1.props.beforeAction"
			@success="onFormSuccess"
		></vk-data-form>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例

export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: {},
					columns:[]
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			page: {
				title: "订单导出（选择需要导出的数据）",
				submitText: "确定",
				cancelText: "关闭",
				showCancel: true,
				top: "7vh",
				width: "800px"
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					fields:[
						"goods_sku_list",
						"order_no",
						"status",
						"pay_time",
						"buyer_remark",
						"seller_remark",
						"seller_note",
						"pay_type",
						"buyer_info.nickname",
						"amount_info.total_amount",
						"amount_info.should_payment_amount",
						"amount_info.payment_amount",
						"amount_info.express_amount",
						"express_info.formatted_address",
						"express_info.receiver_name",
						"express_info.receiver_mobile",
						"fx.settlement_status",
						"fx.plan_exec_time",
						"fx.settlement_time",
						"inviterUserInfo.nickname",
						"inviterUserInfo._id",
					],
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: "",
					// 表单字段显示规则
					columns: [
						{ key: "", title: "订单信息", type: "bar-title" },
						{
						  key:"fields", title:"", type:"checkbox", showLabel:false,
						  itemWidth:100,
						  data:[
						    { value:"goods_sku_list", label:"商品信息" },
						    { value:"order_no", label:"订单编号" },
								{ value:"status", label:"订单状态" },
								{ value:"pay_time", label:"付款时间" },
								{ value:"buyer_remark", label:"买家留言" },
								{ value:"seller_remark", label:"商家备注1" },
								{ value:"seller_note", label:"商家备注2" },
								{ value:"pay_type", label:"付款方式" },
								{ value:"buyer_info.nickname", label:"买家昵称" },
						  ]
						},
						{ key: "", title: "金额信息", type: "bar-title" },
						{
						  key:"fields", title:"", type:"checkbox", showLabel:false,
						  itemWidth:100,
						  data:[
						    { value:"amount_info.total_amount", label:"订单原价" },
								{ value:"amount_info.should_payment_amount", label:"应付金额" },
								{ value:"amount_info.payment_amount", label:"实付金额" },
								{ value:"amount_info.express_amount", label:"快递费用" },
						  ]
						},
						{ key: "", title: "收货地址", type: "bar-title" },
						{
						  key:"fields", title:"", type:"checkbox", showLabel:false,
						  itemWidth:100,
						  data:[
						    { value:"express_info.formatted_address", label:"收货地址" },
								{ value:"express_info.receiver_name", label:"收货人姓名" },
								{ value:"express_info.receiver_mobile", label:"收货人手机" },
						  ]
						},
						{ key: "", title: "分销信息", type: "bar-title" },
						{
						  key:"fields", title:"", type:"checkbox", showLabel:false,
						  itemWidth:100,
						  data:[
						    { value:"fx.settlement_status", label:"结算状态" },
								{ value:"fx.plan_exec_time", label:"计划结算" },
								{ value:"fx.settlement_time", label:"实际结算" },
								{ value:"inviterUserInfo.nickname", label:"上级昵称" },
								{ value:"inviterUserInfo._id", label:"上级ID" },
						  ]
						}
					],
					// 表单验证规则
					rules: {

					},
					// 左侧label的宽度
					labelWidth: "100px",
					beforeAction:(formData={})=>{
						// 可在此处修改 formData 后返回 formData，若在此处return false，则表单不触发提交请求。
						let { columns:exportColumns=[] } = this.value;
						let columns = [];
						for (let i in exportColumns) {
							let item = exportColumns[i];
							if (item.columns) {
								for (let i in item.columns) {
									let column = item.columns[i];
									let key = column.key;
									if (item.type == "object") {
										key = `${item.key}.${column.key}`;
									}
									columns.push({
										...column,
										key
									});
								}
							} else {
								columns.push(item);
							}
						}
						let { fields=[] } = formData;
						let list = [];
						fields.map((field) => {
							let item = vk.pubfn.getListItem(columns, "key", field);
							if (item) {
								list.push(item);
							}
						});
						that.value.show = false; // 关闭页面
						that.$emit("success",list);
						return false
					},
				}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { item={} } = that.value;
			// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
		},
		// 监听 - 页面关闭
		onClose() {
			//that.$refs.form1.resetForm(); // 关闭时，重置表单
		},
		// 监听 - 提交成功后
		onFormSuccess() {
			that.value.show = false; // 关闭页面
			that.$emit("success");
		}
	},
	watch: {

	},
	// 计算属性
	computed: {

	}
};
</script>

<style lang="scss" scoped></style>
